/*
  需求：防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次。
  节流在间隔一段时间执行一次回调的场景有：

  使用场景:
    滚动加载，加载更多或滚到底部监听
    搜索框，搜索联想功能

  思路：
    1、第一次点击，立即调用方法并禁用按钮，等延迟结束再次激活按钮
    2、将需要触发的方法绑定在指令上
  
  使用：给 Dom 加上 v-throttle 及回调函数即可
  <button v-throttle="debounceClick">节流提交</button>
*/
const throttle = {
    mounted(el, binding) {
        if (typeof binding.value !== 'function') {
            throw 'callback must be a function'
        }
        let timer = null
        el.__handleClick__ = function () {
            if (timer) {
                clearTimeout(timer)
            }
            if (!el.disabled) {
                el.disabled = true
                binding.value()
                timer = setTimeout(() => {
                    el.disabled = false
                }, 1000)
            }
        }
        el.addEventListener('click', el.__handleClick__)
    },
    beforeUnmount(el) {
        el.removeEventListener('click', el.__handleClick__)
    },
}

export default throttle
